<template>
  <div id="container4" class="container4"></div>

  <div v-if='visible'>
    <leaders-list-modal v-model:visible="visible"></leaders-list-modal>
  </div>
</template>

<script>
import * as echarts from "echarts";
import LeadersListModal from '@/views/homePage/components/leadersListModal';

export default {
  components: {
    LeadersListModal
  },
  data() {
    return {
      visible: false,
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      let myData = [
        {name: '战略决策类', value: 83},
        {name: '贯彻执行类', value: 91},
        {name: '管理控制类', value: 45},
        {name: '担当作为类', value: 100},
        {name: '廉洁从业类', value: 78},
      ]

      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('container4'));
      let indicator = myData.map(res => {
        return {
          name: res.name,
          max: 120
        }
      })
      let option = {
        radar: {
          indicator,
          splitNumber: 6,
          startAngle: 126,    //旋转
          shape: 'circle',
          splitArea: {                        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {                            // 分隔区域的样式设置。
              color: ['#31b0b5'],       // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
          },
          radius: '65%',
          name: {
            formatter: function () {
              return '';
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['65%', '85%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: myData.map(res => {
              return {
                value: 20,
                name: res.name
              }
            }),
            itemStyle: {
              normal: {
                label:{
                  color: '#ffffff',
                  show:true,
                  formatter: "{b}",
                  position: "inside",
                  rotate: 'tangential',
                },
                color: function (params) {
                  let colors = ['#357aba', '#80ffa4', '#91a568', '#3552ba', '#02a7f0'];
                  // 根据数据项的索引返回不同的颜色
                  return colors[params.dataIndex];
                },
              },
            }
          },
          {
            type: 'radar',
            data: [
              {
                value: myData.map(res => {
                  return res.value
                }),
              },
            ],
            itemStyle: {
              normal: {
                color: "#ffffff",
                width:1
              }
            },
            label: {
              normal: {
                color: '#ffffff',
                show: true,
                formatter: function (params) {
                  return params.value + '%';
                }
              }
            }
          },
        ],
      };
      myChart.setOption(option);

      myChart.on('mouseover', (params) => {//写成箭头函数，获取到vue实例对象上的数据
        this.isDot = params.event.target.__dimIdx;//获取鼠标停留拐点的数据
      })

      myChart.getZr().on('click', () => {
        this.visible = true
      });
    },
  }
}
</script>

<style scoped>
.container4 {
  width: 100%;
  height: calc(100% - 36px);
}
</style>
